<template>
<div class="tc-left pr10 fl">
    <ul class="clearfix uiTab1 mb5 j_outerHeight">
        <!-- <li class="col-md-3 fl uiTab1-active"><a href="javascript:">项</a></li> -->
    </ul>
    <div class="daily_title j_outerHeight">
        <ul class="clearfix">
            <li class="title_cur" data-title="全部">全</li>
            <!-- <li data-title="不超过10个字是不会出现的" data-title-length="10">S</li>
            <li data-title="我的背景色是蓝色的" data-title-color="#3385ff">Z</li>
            <li class="title_not_allowed">G</li>
            <li style="float:right;">D</li> -->
        </ul>
    </div>
    <div class="contentbox">
        <!-- <div class="dailyftSearch clearfix" v-if="souFlag" style="z-index:2"> -->
        <div class="dailyftSearch dailyftSearch1 clearfix hide" v-if="souFlag" style="z-index: 10; height: auto; display: block;">
            <div class="fl uiHas-textIcon">
                <input type="text" placeholder="单号/名称" class="col-md-12 searchName" v-model="searchText"  @keyup.enter="_getProjectLeftListFn()">
                <i class="uiText-searchIcon bgIcon" @click="_getProjectLeftListFn()"></i>
            </div>
            <div class="fl mt5 proSelectBox plr10 mb5" style="width:100%;">
                <select @change="_getProjectLeftListFn()" class="width100" v-model="cityInfo" >
                    <option value='0'>按地区筛选</option>
                    <option v-for="(item, index) in regionNames" :value="item" :key="index">{{ item.name }}</Option>
                </select>
            </div>
            <!-- </div> -->
        </div>
        <table class="uiTable j_outerHeight">
            <thead>
                <tr>
                    <th width="25%">
                        <span class="serial_number" @click="souFlag = true">单号<i class="bgIcon"></i></span>
                    </th>
                    <th width="25%">名称</th>
                    <th width="15%">点位</th>
                    <th width="15%">
                        <select class="theadselect thinScroll" v-model="stageValue" @change="selectFilter()">
                            <option value="">状态</option>
                            <option value="在线">在线</option>
                            <option value="异常">异常</option>
                            <option value="完">完</option>
                            <option value="无">无</option>
                        </select>
                    </th>
                    <th data-title='创建时间'>时间</th>
                </tr>
            </thead>
        </table>
        <div class="scroll-content thinScroll thinScroll-table" v-loading="loading" v-scrollHeight="36">
            <table class="uiTable uiTable-striped uiTable-hover" id="tab1">
                <tbody>
                    <tr v-for="(item,index) in leftListData" :key="index" :class="{'tractive':index == trIndex}" @click="siderBarTrclick(index,item)">
                        <td width="25%">{{ item.order_no }}</td>
                        <td width="25%" :data-title="item.order_name">{{ item.order_name | truncate(4) }}</td>
                        <td width="15%">{{ item.order_points }}</td>
                        <td width="15%">{{ item.state }}</td>
                        <td :data-title="$utils.format('yy-MM-dd hh:mm:ss', item.point_update_date)">{{$utils.format('MM-dd', item.point_update_date)}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="j_outerHeight clearfix tj_bottom">
            <p class="col-md-3" data-title="全部">{{ leftListData.length }}</p>
            <p class="col-md-3 cGreen" data-title="正常">{{ orderMap.get('normalOrders') }}</p>
            <p class="col-md-3 cOrange" data-title="异常">{{ orderMap.get('exceptionOrders') }}</p>
            <p class="col-md-3 cRed" data-title="问题">{{ orderMap.get('exceptionOrders') }}</p>
        </div>
    </div>
</div>
</template>
<script>
import { mapMutations, mapGetters } from 'vuex'
import { getProjectLeftList, selectRegionNameList } from '../Resources/Api/index'
export default {
    data () {
        return {
            loading: false,
            trIndex: 0,
            leftListData: [], // 遍历的数据
            leftListDataClone: [],
            souFlag: false, // 搜索是否显示
            searchText: '', // 搜索内容
            stageValue: '', // 状态筛选
            regionNames: [], // 地区名称
            cityInfo: {} // 地区的信息
        }
    },
    created () {
        this._getProjectLeftListFn()
        this.getCityList()
    },
    methods: {
        ...mapMutations({
            setLeftData: `SET_LEFT_INFO`
        }),
        // 筛选
        selectFilter () {
            this.trIndex = 0
            this.searchText = this.searchText.replace(/(^\s*)|(\s*$)/g, '')
            // let searchReg = new RegExp(`^${this.searchText}$`)
            // if (!this.searchText) searchReg = new RegExp(/[\s\S]*/)
            // this.leftListData = this.leftListDataClone.filter(item => (
            // searchReg.test(item.order_no) || searchReg.test(item.order_name) || searchReg.test(item.region_name)
            // ))
            if (this.stageValue !== '') {
                this.leftListData = this.leftListDataClone.filter(item => (
                    item.state === this.stageValue
                ))
            }
            if (this.leftListData.length > 0) {
                this.siderBarTrclick(this.trIndex, this.leftListData[this.trIndex])
            }
            this.souFlag = false
        },
        getCityList () {
            selectRegionNameList().then((result) => {
                if (result.data.StatusCode === 0) {
                    this.regionNames = result.data.Body.regionNameList
                }
            }).catch((err) => {
                console.log(`获取所有的地区名称,错误内容${err}`)
            })
        },
        _getProjectLeftListFn () {
            let params
            let _this = this
            // if (JSON.stringify(this.cityInfo) !== '{}') {
            //     // params = {
            //     //     region_id: ,
            //     //     area_id: 0,
            //     //     searchText: this.searchText
            //     // }
            //     if (_this.userInfo.as_areaId === null || _this.userInfo.as_areaId === undefined) {
            //         params = {
            //             region_id: this.cityInfo.region_id !== null ? this.cityInfo.region_id : 1, // 地区ID eg: 11
            //             order_checker: _this.userInfo.as_cardNo, // 监理卡号 eg: 00009930
            //             area_id: 0,
            //             searchText: this.searchText
            //         }
            //     } else {
            //         params = {
            //             region_id: 1, // 地区ID eg: 11
            //             area_id: _this.userInfo.as_areaId === '' ? _this.userInfo.as_diquId : _this.userInfo.as_areaId,
            //             searchText: this.searchText
            //         }
            //     }
            // } else
            // 查集团（全国）所有的项目
            if (Number(_this.userInfo.as_diquId) === 39) { // as_diquId:分公司id:集团
                // 按地区搜索
                if (JSON.stringify(this.cityInfo) !== '{}') {
                    params = {
                        region_id: (this.cityInfo.name.indexOf('城-')) === -1 ? this.cityInfo.id : 1,
                        area_id: (this.cityInfo.name.indexOf('城-')) !== -1 ? this.cityInfo.id : 0,
                        searchText: this.searchText
                    }
                    // 不按地区搜索
                } else {
                    params = {
                        region_id: 1,
                        area_id: 0,
                        searchText: this.searchText
                    }
                }
            } else {
                // 查监理所负责的项目
                if (_this.userInfo.as_areaId === null || _this.userInfo.as_areaId === undefined) {
                    // 按地区搜索
                    if (JSON.stringify(this.cityInfo) !== '{}') {
                        params = {
                            region_id: (this.cityInfo.name.indexOf('城-')) === -1 ? this.cityInfo.id : 1,
                            area_id: (this.cityInfo.name.indexOf('城-')) !== -1 ? this.cityInfo.id : 0,
                            order_checker: _this.userInfo.as_cardNo, // 监理卡号 eg: 00009930
                            searchText: this.searchText
                        }
                        // 不按地区搜索
                    } else {
                        params = {
                            region_id: _this.userInfo.as_diquId, // 地区ID，分公司 eg: 11
                            order_checker: _this.userInfo.as_cardNo, // 监理卡号 eg: 00009930
                            area_id: 0, // 城
                            searchText: this.searchText
                        }
                    }
                    // 按指定城的所有项目
                } else {
                    // 按地区搜索
                    if (JSON.stringify(this.cityInfo) !== '{}') {
                        params = {
                            region_id: (this.cityInfo.name.indexOf('城-')) === -1 ? this.cityInfo.id : 1,
                            area_id: (this.cityInfo.name.indexOf('城-')) !== -1 ? this.cityInfo.id : 0,
                            order_checker: _this.userInfo.as_cardNo, // 监理卡号 eg: 00009930
                            searchText: this.searchText
                        }
                        // 不按地区搜索
                    } else {
                        params = {
                            region_id: 1, // 地区ID eg: 11：（查分公司的所有项目的条件id）
                            area_id: _this.userInfo.as_areaId === '' ? _this.userInfo.as_diquId : _this.userInfo.as_areaId,
                            searchText: this.searchText
                        }
                    }
                }
            }
            getProjectLeftList(params).then((result) => {
                if (result.data.StatusCode === 0) {
                    this.leftListDataClone = result.data.Body.orderList
                    this.leftListData = this.leftListDataClone
                    if (this.leftListData.length > 0) {
                        this.siderBarTrclick(this.trIndex, this.leftListData[this.trIndex])
                    }
                    this.selectFilter()
                } else {
                    console.log(result.data.StatusMsg)
                }
            }).catch((err) => {
                console.log(`获取项目列表数据接口错误,错误内容${err}`)
            })
            this.souFlag = false
        },
        siderBarTrclick (index, item) {
            this.trIndex = index
            // 保存字段时 一定要确认公共字段一致
            this.setLeftData(item)
            // 关闭弹窗
            this.$router.push(this.$route.matched[1].path)
        }
    },
    watch: {
        updateLeft () {
            this._getProjectLeftListFn()
        }
    },
    computed: {
        ...mapGetters(['leftInfo', 'updateLeft', 'userInfo']),
        orderMap: function () {
            const orderMap = new Map()
            let normalOrders = 0
            let exceptionOrders = 0
            for (let i = 0; i < this.leftListData.length; i++) {
                if (this.leftListData[i].state === '在线') {
                    normalOrders += 1
                } else if (this.leftListData[i].state === '异常') {
                    exceptionOrders += 1
                }
            }
            orderMap.set('normalOrders', normalOrders).set('exceptionOrders', exceptionOrders)
            return orderMap
        }
    }
}
</script>
